<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>仪表板</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

		<link rel="icon" href="../img/web/web.ico" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/app.css" />

		<body ontouchstart="">
			<div class="layui-fluid">

				<div class="layui-row layui-col-space15">
					<div class="layui-col-md3">
						<div class="vip-chart bg-info">
							<div class="vip-chart-content">
								<h5>日总营业额</h5>
								<h2 class="layui-elip">500,000</h2>
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-header">医保与自费比例</div>
							<div class="layui-card-body">
								<div class="vip-demo-max-height-box" id="chart-total"></div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">医保人数</h5>
									<h2 class="layui-elip">150</h2>
								</div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">自费人数</h5>
									<h2 class="layui-elip">100</h2>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md3">
						<div class="vip-chart bg-dark">
							<div class="vip-chart-content">
								<h5>日门诊营业额</h5>
								<h2 class="layui-elip">200,000</h2>
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-header">医保与自费比例</div>
							<div class="layui-card-body">
								<div class="vip-demo-max-height-box" id="chart-department-day"></div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">医保人数</h5>
									<h2 class="layui-elip">150</h2>
								</div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">自费人数</h5>
									<h2 class="layui-elip">100</h2>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md3">
						<div class="vip-chart bg-mint">
							<div class="vip-chart-content">
								<h5>日出院营业额</h5>
								<h2 class="layui-elip">300,000</h2>
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-header">医保与自费比例</div>
							<div class="layui-card-body">
								<div class="vip-demo-max-height-box" id="chart-hospital-out"></div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">医保人数</h5>
									<h2 class="layui-elip">150</h2>
								</div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="vip-chart bg-light">
								<div class="vip-chart-content">
									<h5 class="layui-elip">自费人数</h5>
									<h2 class="layui-elip">100</h2>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md3">
						<div class="vip-chart bg-success">
							<div class="vip-chart-content">
								<h5>月总营业额</h5>
								<h2 class="layui-elip">1000,000</h2>
							</div>
							
							<div class="vip-chart bg-warning">
							<div class="vip-chart-content">
								<h5>月门诊营业额</h5>
								<h2 class="layui-elip">500,000</h2>
							</div></div>
							<!--<div class="vip-card vip-box-shadow">
								<a class="vip-card-content">
									<p class="layui-elip workbench-register">月门诊营业额</p>
									<div>500,000</div>
								</a>
							</div>-->
							<div class="vip-chart bg-primary">
							<div class="vip-chart-content">
								<h5>月出院营业额</h5>
								<h2 class="layui-elip">500,000</h2>
							</div></div>
							<!--<div class="vip-card vip-box-shadow">
								<a class="vip-card-content">
									<p class="layui-elip workbench-register">月出院营业额</p>
									<div>500,000</div>
								</a>
							</div>-->
							<div class="layui-col-md6">
								<div class="vip-chart bg-light">
									<div class="vip-chart-content">
										<h5 class="layui-elip">门诊医保人数</h5>
										<h2 class="layui-elip">150</h2>
									</div>
								</div>
							</div>
							<div class="layui-col-md6">
								<div class="vip-chart bg-light">
									<div class="vip-chart-content">
										<h5 class="layui-elip">门诊自费人数</h5>
										<h2 class="layui-elip">100</h2>
									</div>
								</div>
							</div>

							<div class="layui-col-md6">
								<div class="vip-chart bg-light">
									<div class="vip-chart-content">
										<h5 class="layui-elip">出院医保人数</h5>
										<h2 class="layui-elip">150</h2>
									</div>
								</div>
							</div>
							<div class="layui-col-md6">
								<div class="vip-chart bg-light">
									<div class="vip-chart-content">
										<h5 class="layui-elip">出院自费人数</h5>
										<h2 class="layui-elip">100</h2>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<!-- 统计.1 TPL -->
			<script type="text/html" id="countTpl">
				{{# layui.each(d.list, function(index, item){ }} {{# if(item.type == 1){ }}
				<div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
					<div class="vip-card">
						<a class="vip-card-content">
							<p class="layui-elip">{{ item.count }}</p>
							<div class="layui-elip">{{ item.title }}</div>
						</a>
					</div>
				</div>
				{{# }else if(item.type == 2){ }}
				<div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
					<div class="vip-panel">
						<div class="vip-panel-title bg-info"></div>
						<div class="vip-panel-body">
							<div class="vip-panel-body-img-box">
								<img src="{{ item.img }}" />
								<p>{{ item.nickname }}</p>
							</div>
						</div>
					</div>
				</div>
				{{# } }} {{# }) }}
				<div class="layui-col-md3 layui-col-sm6 layui-col-xs6">
					<div class="vip-card">
						<a class="vip-card-content vip-box-shadow vip-workbench-tab">
							<div>工作台</div>
							<i class="vip-icon">&#xe765;</i>
						</a>
					</div>
				</div>

			</script>

			<!-- 统计.2 TPL -->
			<script type="text/html" id="count2Tpl">
				{{# layui.each(d.list, function(index, item){ }} {{# if(index>5){return ;} }}
				<div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
					<div class="vip-chart bg-light">
						<div class="vip-chart-content">
							<h5 class="layui-elip">{{ item.title }}</h5>
							<h2 class="layui-elip">{{ item.count }}</h2>
						</div>
					</div>
				</div>
				{{# }) }}
			</script>

			<script type="text/javascript" src="../layui/layui.js"></script>
			<script type="text/javascript" src="../js/jquery/2.1.4/jquery.min.js"></script>
			<script type="text/javascript" src="../js/sparkline/jquery.sparkline.min.js"></script>
			<script type="text/javascript" src="../js/echarts/echarts.min.js"></script>
			<script type="text/javascript" src="../js/echarts/theme/style.js"></script>
			<script type="text/javascript">
				layui.config({
					base: '../js/'
				}).use(['app', 'layer', 'element'], function() {
					var $ = layui.$,
						app = layui.app,
						element = layui.element,
						layer = layui.layer;

					var chartCake = echarts.init(document.getElementById("chart-total"), 'style');
					// 饼图
					function chart2() {
						option = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								left: 'right',
								data: ['医保', '自费']
							},
							default: {
								text: 'loading',
								color: '#c23531',
								textColor: '#000',
								maskColor: 'rgba(255, 255, 255, 0.8)',
								zlevel: 0
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: '80%',
								center: ['50%', '50%'],
								data: [{
										value: 1000,
										name: '医保'
									},
									{
										value: 500,
										name: '自费'
									}
								],
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						if(option && typeof option === "object") {
							chartCake.setOption(option, true);
						}
					}

					var chartDepartmentDay = echarts.init(document.getElementById("chart-department-day"), 'style');
					// 饼图
					function chartDepartmentDayFunc() {
						option = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								left: 'right',
								data: ['医保', '自费']
							},
							default: {
								text: 'loading',
								color: '#c23531',
								textColor: '#000',
								maskColor: 'rgba(255, 255, 255, 0.8)',
								zlevel: 0
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: '80%',
								center: ['50%', '50%'],
								data: [{
										value: 1000,
										name: '医保'
									},
									{
										value: 500,
										name: '自费'
									}
								],
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						if(option && typeof option === "object") {
							chartDepartmentDay.setOption(option, true);
						}
					}

					var chartHospitalOut = echarts.init(document.getElementById("chart-hospital-out"), 'style');
					// 饼图
					function chartHospitalOutFunc() {
						option = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								left: 'right',
								data: ['医保', '自费']
							},
							default: {
								text: 'loading',
								color: '#c23531',
								textColor: '#000',
								maskColor: 'rgba(255, 255, 255, 0.8)',
								zlevel: 0
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: '80%',
								center: ['50%', '50%'],
								data: [{
										value: 1000,
										name: '医保'
									},
									{
										value: 500,
										name: '自费'
									}
								],
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};
						if(option && typeof option === "object") {
							chartHospitalOut.setOption(option, true);
						}
					}
					chart2();
					chartHospitalOutFunc();
					chartDepartmentDayFunc();

				});
			</script>
		</body>

</html>